<template>
	<div class="mainWarp">
		<div class="typeboxtit">
			<div class="tit">
				<p>商品分类</p>
			</div>
		</div>
		<div class="aui-scrollView">
			<div class="m-scrolltab" data-ydui-scrolltab>
				<van-tree-select
					v-model:main-active-index="activeIndex"
					height="100%"
					:items="items"
					@click-nav="onChange"
				>
					<template #content>
						<div class="scrolltab-content">
							<div class="scrolltab-content-item">
								<h2>{{ typeName }}</h2>
								<div style="margin-top: 20px">
									<div class="aui-class-ad-img">
										<a href="javascript:;">
											<img src="/assets/images/v2.jpg" alt="" />
										</a>
									</div>
									<div class="aui-flex-links">
										<router-link class="aui-flex-links-item" :to="{ path: '/product/info', query: { proid: item.id } }" v-for="item in typeProduct"
											:key="item.id">
											<div class="aui-flex-links-img" >
												<img :src="item.thumbs_text" alt="" />
											</div>
											<div class="aui-flex-links-text">{{ item.name }}</div>
										</router-link>
									</div>
								</div>
							</div>
						</div>
					</template>
				</van-tree-select>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<Bottom />
</template>

<script setup>
import Bottom from "@/components/public/bottom.vue";	
	const activeIndex = ref(0);
	const typelist = ref([]);
	const items = ref([]);
	const typeProduct = ref([]);
	const typeName = ref("全部商品");
	onBeforeMount(() => {
		getTypeData();
		getTypeProductData(0);
	});
	const getTypeData = async () => {
		let result = await Api.product.typeIndex();
		if (result.code == 1) {
			typelist.value = result.data;
			typelist.value.unshift({
				id: 0,
				name: "全部商品",
			});
		}
		typelist.value.forEach((item) => {
			items.value.push({ text: item.name });
		});
	};
	const onChange = (index) => {
		getTypeProductData(typelist.value[index].id);
		typeName.value = typelist.value[index].name;
	};
	const getTypeProductData = async (id) => {
		let res = await Api.product.productTypeList({ typeid: id });
		if (res.code == 1) {
			typeProduct.value = res.data;
		}
	};
</script>

<style lang="scss" scoped>
	.aui-scrollView {
		.m-scrolltab {
			.van-tree-select {
				::v-deep .van-tree-select__nav {
					flex: 0.6;
				}
			}
		}
	}
	.typeboxtit {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		.tit {
			position: fixed;
			width: 100%;
			max-width: 512px;
			top: 0;
			height: 44px;
			z-index: 999;
			background: #fff;
			line-height: 44px;
			p {
				padding-left: 20px;
				color: #444444;
				font-size: 14px;
			}
		}
	}
	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		top: 50px;
		margin-top: 0;
		.scrolltab-content {
			height: 100%;
			background-color: #f2f2f2;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			padding: 0.4rem 0.8rem 0.8rem 0.8rem;
			position: relative;
			.aui-flex-links-item {
				position: relative;
				float: left;
				padding: 5px 0;
				width: 27.333333%;
				box-sizing: border-box;
				margin: 0 3%;
			}

			.aui-flex-links {
				padding: 10px 8px;
				position: relative;
				overflow: hidden;
				background: #fff;
				border-radius: 5px;
				margin-top: 15px;
				margin-bottom: 15px;
				.aui-flex-links-item {
					position: relative;
					float: left;
					padding: 5px 0;
					width: 35%;
					box-sizing: border-box;
					margin: 0 7%;
					.aui-flex-links-img {
						width: 80px;
						height: 80px;
						margin: auto;
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							display: block;
							border: none;
						}
					}
					.aui-flex-links-text {
						color: #444;
						font-size: 12px;
						text-align: center;
						padding-top: 5px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>